<script setup>
import { ref, watch } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { userUpdatePasswordService } from '@/api/user'
const userStore = useUserStore()

// 账号信息对象
const accountInfo = ref('')

userStore.getUserInfoService()

// 监听 userInfo 变化，自动更新账号信息
watch(
  () => userStore.userInfo,
  (newVal) => {
    if (newVal) {
      accountInfo.value = {
        userId: newVal.userId || '',
        username: newVal.username || '',
        email: newVal.email || '',
        createTime: newVal.createTime || '',
        updateTime: newVal.updateTime || ''
      }
    }
  },
  { immediate: true }
)

// 重置密码表单相关
const pwdForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const formRef = ref()
const router = useRouter()

const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    console.log(pwdForm.value)
    await userUpdatePasswordService(pwdForm.value)
    ElMessage({ type: 'success', message: '更换密码成功' })
    userStore.changeToken('')
    userStore.changeUserInfo({})
    router.push('/login')
  }
}
const onReset = () => {
  formRef.value.resetFields(pwdForm.value)
  pwdForm.value.oldPassword = ''
  pwdForm.value.newPassword = ''
  pwdForm.value.confirmPassword = ''
}

const checkOldSame = (rule, value, cb) => {
  if (value === pwdForm.value.oldPassword) {
    cb(new Error('原密码和新密码不能一样!'))
  } else {
    cb()
  }
}

const checkNewSame = (rule, value, cb) => {
  if (value !== pwdForm.value.newPassword) {
    cb(new Error('新密码和确认再次输入的新密码不一样!'))
  } else {
    cb()
  }
}
const rules = {
  // 原密码
  oldPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    }
  ],
  // 新密码
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    { validator: checkOldSame, trigger: 'blur' }
  ],
  // 确认新密码
  confirmPassword: [
    { required: true, message: '请再次确认新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    { validator: checkNewSame, trigger: 'blur' }
  ]
}
</script>
<template>
  <div class="main1">
    <div class="user-info-page-header">
      <span class="user-info-title">账号信息</span>
    </div>
    <!-- 账号信息卡片 -->
    <el-card class="account-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><User /></el-icon>
          <span class="card-title">账号信息</span>
        </div>
      </template>
      <div class="account-info-row">
        <div class="info-item">
          <span class="info-label">账号ID:</span>
          <span class="info-value">{{ accountInfo.userId || '无数据' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">用户名：</span>
          <span class="info-value">{{ accountInfo.username || '无数据' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">账号类型：</span>
          <span class="info-value">专家用户</span>
        </div>
        <div class="info-item">
          <span class="info-label">注册时间：</span>
          <span class="info-value">{{
            accountInfo.createTime || '无数据'
          }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">更新时间：</span>
          <span class="info-value">{{
            accountInfo.updateTime || '无数据'
          }}</span>
        </div>
      </div>
    </el-card>

    <!-- 重置密码卡片 -->
    <el-card class="reset-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon style="color: #2176d2"><Lock /></el-icon>
          <span class="card-title">重置密码</span>
        </div>
      </template>
      <el-row>
        <el-col :span="12">
          <el-form
            :model="pwdForm"
            :rules="rules"
            ref="formRef"
            label-width="100px"
            size="large"
          >
            <el-form-item label="原密码" prop="oldPassword">
              <el-input
                v-model="pwdForm.oldPassword"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="pwdForm.newPassword"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input
                v-model="pwdForm.confirmPassword"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="onSubmit" type="primary">修改密码</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.main1 {
  padding: 20px;
}
.user-info-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.user-info-title {
  font-size: 22px;
  font-weight: bold;
  color: #2176d2;
}

.account-card {
  margin-bottom: 24px;
  background: #f7fafd;
  border: 1px solid #e6ecf3;
  box-shadow: none;
  border-radius: 8px;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0 0 8px 0;
}
.header-icon {
  color: #2176d2;
  font-size: 20px;
}
.card-title {
  color: #2176d2;
  font-size: 18px;
  font-weight: bold;
}
.account-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
  padding: 12px 0 8px 0;
}
.info-item {
  display: flex;
  align-items: center;
  min-width: 180px;
  font-size: 15px;
  margin-bottom: 8px;
}
.info-label {
  color: #222;
  font-weight: 500;
  margin-right: 4px;
}
.info-value {
  color: #2176d2;
  font-weight: 400;
}
.status-normal {
  display: inline-block;
  background: #e6f9ea;
  color: #3bb66c;
  border-radius: 12px;
  padding: 2px 14px;
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
}
.reset-card {
  margin-bottom: 24px;
}
</style>
